<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 本质上obj没有改变 -->
        <button @click="obj.name='rose'">修改obj.name</button>
        <button @click="obj = { name:'rose', age: 15 }">修改obj指向</button>
        <button @click="obj.age = 99">修改obj.age</button>
        <button @click="obj.pet.nickname = '小强'">修改obj.pet.nickname</button>
        <p>{{ obj }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: 'jack',
                    age: 16,
                    pet: {
                        nickname: '旺财',
                    }
                }
            },
            watch: {
                // // 侦听对象要修改对象的指向才能触发
                // obj (newVal, oldVal) {
                //     console.log('obj改变了', newVal, oldVal)
                // },

                // // 可是我就想侦听对象里某个属性的改变
                // "obj.name" (newVal, oldVal) {

                //     console.log('name改变了', newVal, oldVal)
                // },

                // 深度侦听：主要用在对象上，可以让对象里任何属性发生改变都能侦听到
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 侦听到改变后调用的回调函数
                    // 这个时候因为对象自己的地址没变过，所以newVal和oldVal没意义。可以不写
                    handler () {
                        console.log('obj里有内容改变了')
                    },
                    // 是否要在页面打开时立即调用一次handler回调函数
                    // 默认不会调用
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>